<template>
	<view class="pageview flex flex-direction" v-show="i === index">
		<view class="top-wrap">
			<view class="bg"><image v-if="agent_bg_img" :src="assetsPath + agent_bg_img" mode="aspectFill"></image></view>
			<zx-nav noBack noTitle>
				<view slot="left" class="nav-reback u-flex u-flex-center" @tap="backHome">
					<u-icon name="home" color="#fff" size="40"></u-icon>
					<text>买家首页</text>
				</view>
				<view slot="center" class="nav-title">我的小店</view>
			</zx-nav>
		</view>
		<div :style="{ height: topH }"></div>
		<!-- <view :style="{ height: CustomBar + 'px' }"></view> -->
		<view class="flex-sub main">
			<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption">
				<view class="shop">
					<view class="shop-hd">
						<view class="shop-img"><image v-if="agentInfo.wx_img" :src="agentInfo.wx_img" mode="widthFix"></image></view>
						<view class="info flex align-center justify-between">
							<view class="">
								<view class="shop-name">{{ userInfo.username || 'ID' + userInfo.id }}</view>
								<view class="u-primary">风里雨里，为爱传递</view>
							</view>
						</view>
					</view>
					<view class="banner">
						<swiper
							class="swiper"
							:indicator-dots="true"
							:autoplay="true"
							:interval="3000"
							:duration="1000"
							indicator-color="rgba(255, 255, 255, 0.6)"
							indicator-active-color="#FFFFFF"
						>
							<swiper-item
								@tap="
									href({
										url: item.path
									})
								"
								v-for="(item, itemIndex) in bannerList"
								:key="itemIndex"
							>
								<image class="slide-image" :src="assetsPath+item.img_url" mode="aspectFill" />
							</swiper-item>
						</swiper>
					</view>
					<view class="operateMenu">
						<view class="box order">
							<view class=" flex-direction">
								<div class="order-hd">
									<view class="flex align-center">
										<view class="line"></view>
										<text>商家概况</text>
									</view>
								</div>
								<view class="cu-list grid col-4 no-border">
									<view class="cu-item" v-for="(item, index) in cuIconList" :key="index" @click="href(item)">
										<view class="imgbox"><image :src="`${assetsPath}${item.img}`" mode="widthFix"></image></view>
										<text>{{ item.name }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="box order">
							<view class="flex-direction">
								<div class="order-hd">
									<view class="flex align-center">
										<view class="line"></view>
										<text>其他服务</text>
									</view>
								</div>
								<view class="cu-list grid col-4 no-border">
									<view class="cu-item" v-for="(item, index) in orIconList" :key="index" @click="href(item)">
										<view class="imgbox"><image :src="`${assetsPath}${item.img}`" mode="widthFix"></image></view>
										<text>{{ item.name }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<!-- <uploadbg ref="uploadbg" @upload="getAgentInfo" ></uploadbg> -->
		<div class="cu-tabbar-height"></div>
		<!-- <poster ref="poster" :shopInfo="agentInfo"></poster> -->
	</view>
</template>

<script>
import MescrollMoreItemMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	data() {
		return {
			bgColor: 'nobg',
			isHome: true,
			isInit: false,
			agent_bg_img: '/store/bg.png',
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				use: false,
				empty: {
					use: false
				}
			},
			cuIconList: [
				{
					img: '/store/order.png',
					name: '订单管理',
					url: ''
				},

				{
					img: '/store/storeMustread_icon@2x.png',
					name: '进群交流',
					url: '/pages/article/details?id=20'
				}
			],
			orIconList: [
				{
					img: '/store/contact_us_icon@2x.png',
					name: '联系我们',
					url: '/pages/article/details?id=21'
				}
			],
			CustomBar: 60,
			bannerList: [
				{
					img_url: '/store/banner.png'
				}
			]
		};
	},
	created() {},
	mounted() {
		if (this.Custom) {
			this.CustomBar = this.Custom.bottom + this.Custom.top - this.StatusBar;
		}
	},
	computed: {
		...mapState(['userInfo']),
		topH() {
			return this.CustomBar + 'px';
		}
	},
	created() {},
	methods: {
		// 主动触发加载
		mescrollTrigger() {
			this.isInit = true; // 标记为true
		},
		downCallback() {
			// this.getAgentInfo();
		},
		getAgentInfo() {
			// this.$postajax(this.$agentapi.getAgentInfo).then(da => {
			// 	if (da.code == 0) {
			// 		this.mescroll.endSuccess(0, false);
			// 		this.SET_AGENTINFO(da.data);
			// 	}
			// });
		},
		href(item) {
			if (item.url) {
				if (item.url == '/pages/index/index') {
					uni.switchTab({
						url: item.url
					});
				} else {
					uni.navigateTo({
						url: item.url
					});
				}
			} else if (item.name == '订单管理') {
				this.$emit('tabChange', 2);
			}
		},

		backHome() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pageview {
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: #f4f4f4;
}

.pageview .main {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
	margin: 0;
}
.top-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	.nav-title,
	.nav-reback {
		color: #fff;
		font-size: 30upx;
	}
	.nav-title {
		text-align: center;
		font-size: 32upx;
	}
	.bg {
		width: 100%;
		background: #000000;
		position: absolute;
		z-index: 0;
		left: 0;
		width: 100%;
		height: 395upx;
		image {
			width: 100%;
			height: 395upx;
			opacity: 0.69;
		}
		&::after {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			content: '';
			display: block;
			background: rgba(0, 0, 0, 0.5);
		}
	}
}

.shop {
	margin-top: 45upx;
	background: #f4f4f4;
	border-radius: 28upx 28upx 0px 0px;
}
.shop-hd {
	padding: 20upx 28upx 24upx;
	position: relative;
	z-index: 1;
	.shop-img {
		width: 145upx;
		height: 145upx;
		background: #d8d8d8;
		border-radius: 12upx;
		position: absolute;
		top: -20upx;
		overflow: hidden;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.info {
		.shop-name {
			font-size: 34upx;
			font-weight: bold;
			color: #1c1c1e;
			margin-bottom: 10upx;
		}

		margin-left: 161upx;
		.changeBg {
			width: 186upx;
			height: 52upx;
			line-height: 60upx;
			background: #ffe2d4;
			border-radius: 26upx;
			text-align: center;
			vertical-align: middle;
			font-size: 26upx;
			font-weight: 500;
			color: #fb590e;
			image {
				width: 30upx;
				height: 30upx;
				vertical-align: middle;
				margin-top: -3px;
				margin-right: 10upx;
			}
		}
		.comeInShop {
			width: 174upx;
			height: 68upx;
			line-height: 68upx;
			text-align: center;
			background: linear-gradient(90deg, #ff8844 0%, #ff5d03 100%);
			border-radius: 34upx;
			font-size: 28upx;
			font-weight: 500;
			color: #ffffff;
			.arrow {
				width: 20upx;
				height: 20upx;
				margin-left: 4upx;
			}
		}
	}

	.action-list {
		margin-top: 14upx;

		.action-item {
			text-align: center;
			background: #e5fbea;
			border-radius: 31upx;

			height: 44upx;
			line-height: 44upx;
			margin: 0 auto;

			.icon {
				width: 22upx;
				height: 22upx;
				margin-right: 8upx;
				vertical-align: middle;
				margin-top: -6upx;
			}

			.text {
				color: var(--nav-bg);
				vertical-align: middle;
				font-size: 24upx;
			}
		}

		.action-item + .action-item {
			margin-left: 12upx;
		}
	}
}

.banner {
	border-radius: 8upx;
	display: block;
	overflow: hidden;
	margin: 24upx 28upx 28upx;

	image {
		display: block;
		width: 100%;
	}

	.swiper {
		border-radius: 8upx;
		overflow: hidden;
		height: 270upx;
		transform: translateY(0);
	}

	navigator {
		display: block;
		height: 100%;
	}

	.slide-image {
		width: 100%;
		height: 100%;
		border-radius: 8upx;
	}
}

::v-deep .operateMenu {
	.grid {
		padding: 32upx 5px 0;
		border-radius: 8upx;
		margin: 0 28upx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		.cu-item {
			position: relative;
			display: flex;
			padding: 0 0 32rpx;
			flex-direction: column;
			width: 25%;
		}

		.imgbox {
			height: 86upx;
			width: 78upx;
			margin: 0 auto 7upx;

			image {
				height: 86upx;
				width: 78upx;
				display: block;
			}
		}

		.imgbox + text {
			font-size: 26upx;
			color: #1c1c1e;
			padding-bottom: 0;
			margin-top: 0;
		}

		.num {
			font-size: 40upx;
			color: #1c1c1e;
			font-weight: 500;
			line-height: 56upx;
		}
	}

	.cu-list.grid.no-border > .cu-item {
		padding-bottom: 32upx !important;
		padding-top: 0;
	}

	.order {
		border-radius: 16rpx;
		background: #ffffff;
		margin: 24upx 28upx;
		padding: 32rpx 0 0;

		.order-hd {
			font-size: 32upx;
			font-weight: bold;
			color: #1c1c1e;
			padding: 0 0 20upx;

			.line {
				margin-right: 28upx;
				width: 8upx;
				height: 40upx;
				background: linear-gradient(180deg, #ff8b4a 0%, #ff5501 100%);
				border-radius: 0px 6upx 6upx 0px;
			}
		}
	}

	.list {
		border-radius: 12rpx;
		background: #ffffff;
		margin: 20upx 28upx;

		.list-item {
			margin: 0 30upx 0 12upx;
			padding: 33upx 22upx;

			text {
				font-size: 26upx;
				color: #1c1c1e;
			}

			image {
				width: 26upx;
				height: 26upx;
			}
		}

		.list-item + .list-item {
			border-top: 1px solid #d8d8d8;
		}
	}
}
</style>
